<template>
  <el-date-picker
    v-model="value2"
    type="daterange"
    align="right"
    unlink-panels
    range-separator="-"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    :picker-options="pickerOptions"
    @change="changeTime"
    size="mini"
  >
  </el-date-picker>
</template>
<script>
import moment from "moment";
export default {
  data() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000); // 30天前
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: [start, end], // 默认选中最近30天
    };
  },
  methods: {
    changeTime() {
      // console.log(JSON.stringify(this.value2));
      let m1 = moment(this.value2[0]).format("YYYY-MM-DD");
      let m2 = moment(this.value2[1]).format("YYYY-MM-DD");
      this.$emit("OptionsRange", m1, m2);
      // console.log(JSON.stringify(m1));
      // console.log(JSON.stringify(m2));
      //   this.queryParams.payDayStart = m1;
      //   this.queryParams.payDayEnd = m2;
      //   this.getList();
      // this.queryParams.startDate = m1;
      // this.queryParams.endDate = m2;
    },
  },
};
</script>